<template>
    <div class="zhongbiao-analysis">

        <item-layout class="statistics" title="统计信息">
            <template slot="afterTitle">
                <p class="statistics-time">{{companyInfo.statisticsTime}}</p>
            </template>

            <div class="statistics-items">
                <div v-for="item in statisticsArr" :key="item.title">
                    <div class="top">
                        <div class="num">{{item.num}}</div>
                        <div>{{typeName(item.type)}}</div>
                    </div>
                    <div class="title">{{item.title}}</div>
                </div>
            </div>
        </item-layout>

        <div class="charts">
            <item-layout title="年度项目统计">
                <annual-project :options="yearProjectObj"></annual-project>
            </item-layout>

            <item-layout title="月度项目金额规模统计">
                <month-project-line :options="MonBiddingPriceList"></month-project-line>
            </item-layout>

            <item-layout title="市场区域分布">
                <age-count :type="'marketArea'" :options="marketAreaList" :ytitle-left="'中标数量'" :ytitle-right="'中标金额'"></age-count>
            </item-layout>
        </div>

        <div class="bottom">
            <div class="bottom-left">
                <h3>中标项目动态</h3>
                <load-list 
                v-model="BidDynamicList" 
                :search="BidDynamicPgdata" 
                :action="`${$store.state.api.tbUrl}/tbanalysis/winnernoticelist.json`"  
                @queryEnd="bidDynamicAfter"
                >
                    <template>
                        <div class="bottom-right-items" v-for="(item , index) in BidDynamicList" :key="index"
                            v-czc="['查企业-详情-中标分析（企业画像）', '点击列表' , '中标项目动态', index, `checkEnterpriseWin-list-winProject`]">
                            <div class="title_con">
                                <p>
                                    <span @click="zbdtTitleClick(item)">{{index + 1 +'.' + item.notice}}</span>
                                </p>
                                <div>
                                    <span>{{item.publishtime}}</span>

                                    <collect-star
                                        :data="{objectguid: item.guid, objectname: item.name, objecttype: noticeCollType(item.noticetype), marktype: 'collect',}"
                                        :defaultVal="item.bj === '1'"
                                    ></collect-star>
                                </div>
                            </div>
                            <div class="detail_con">
                                <el-tag size="mini" type="info" v-if="!!item.area">{{item.area}}</el-tag>
                                <el-tag size="mini" type="info" v-if="!!item.industry">{{item.industry}}</el-tag>
                                <el-tag size="mini" v-if="!!item.price">{{ Math.floor(item.price)/10000 + '万元'}}</el-tag>
                            </div>
                        </div>
                     </template>
                </load-list>
            </div>

            <div class="bottom-right">
                <h3>关联企业
                    <el-radio-group v-model="activeName" size="mini" class="re-radio">
                        <el-radio-button label="1" >
                            <span style="font-size:14px;" 
                                v-czc.prevent="['查企业-详情-中标分析（企业画像）', '导航' , '竞争企业', 0 ,`checkEnterpriseWin-btn-competeEnterprise`]">
                                竞争企业
                            </span>
                        </el-radio-button>
                        <el-radio-button label="2">
                            <span style="font-size:14px;"
                                v-czc="['查企业-详情-中标分析（企业画像）', '导航' , '招标企业', 0 ,`checkEnterpriseWin-btn-bidEnterprise`]">
                                招标企业
                            </span>
                        </el-radio-button>
                    </el-radio-group>
                </h3>

                <div v-show="activeName == 1 ">
                    <load-list 
                    v-model="jzqyList" 
                    :search="jzqyPgdata" 
                    :action="`${$store.state.api.tbUrl}/tbanalysis/competesinfo.json`" 
                    @queryEnd="jzqyAfter"
                    >
                        <template>

                            <div class="bottom-right-items" v-for="(item , index) in jzqyList" :key="'k1' + item.company"
                                v-czc="['查企业-详情-中标分析（企业画像）', '点击列表' , '竞争企业', index, `checkEnterpriseWin-list-competeEnterpriseList`]">
                                <div class="title_con">
                                    <p>
                                        <span @click="companyHandle(item)">{{index + 1 +'.' + item.company}}</span>
                                    </p>
                                    <div>
                                        <collect-star
                                            :data="{ objectguid: item.guid, objectname: item.company, objecttype: 'enterprise', marktype: 'follow',}"
                                            :defaultVal="item.bj === '1'"
                                            :icon="['&#xeca2;', '&#xeca1;']"
                                        ></collect-star>
                                    </div>
                                </div>
                                <div class="detail_con">
                                    <span>中标次数：{{item.nums ||( item.nums == 0 ? 0 : '-')}}</span>
                                    <span>中标项目行业：{{item.industry || '-'}}</span>
                                    <span>中标金额：{{ item.price == 0 ? '0' :  item.price == null ?  '-' : ((Math.floor(item.price)/10000).toFixed(4) + '万元')}}</span>
                                    <span>招标时间：{{item.publishtime || '-'}}</span>
                                </div>
                            </div>
                            
                        </template>
                    </load-list>

                </div>

                <div v-show="activeName ==2">
                    <load-list 
                    v-model="hzqyList" 
                    :search="hzqyPgdata" 
                    :action="`${$store.state.api.tbUrl}//tbanalysis/partnersinfo.json`" 
                    @queryEnd="hzqyAfter"
                    >
                        <template>
                            <div class="bottom-right-items" v-for="(item , index) in hzqyList" :key="'k2' + item.company" 
                                v-czc="['查企业-详情-中标分析（企业画像）', '点击列表' , '招标企业', index, `checkEnterpriseWin-list-bidEnterpriseList`]">
                                <div class="title_con">
                                    <p>
                                        <span @click="companyHandle(item)">{{index + 1 +'.' + item.company}}</span>
                                    </p>
                                    <div>
                                        <collect-star
                                            :data="{ objectguid: item.guid, objectname: item.company, objecttype: 'enterprise', marktype: 'follow',}"
                                            :defaultVal="item.bj === '1'"
                                            :icon="['&#xeca2;', '&#xeca1;']"
                                        ></collect-star>
                                    </div>
                                </div>
                                <div class="detail_con">
                                    <span>招标次数：{{item.nums ||( item.nums == 0 ? 0 : '-')}}</span>
                                    <span>招标项目行业：{{item.industry || '-'}}</span>
                                    <span>招标时间：{{item.publishtime || '-'}}</span>
                                </div>
                            </div>
                        </template>
                    </load-list>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
import contacts from '../zb-analysis/components/contacts.vue';
import itemLayout from '../zb-analysis/components/item-layout.vue';

import AnnualProject from '../zb-analysis/charts/annual-project.vue';
import monthProjectLine from '../zb-analysis/charts/month-project-line.vue';
import ageCount from '../zb-analysis/charts/age-count.vue';

import EmptyList from '@components/sys/empty-list';
import contentItem from '@/pages/application/info/components/item.vue';
import notice from '@/mixins/notice.js';
import LoadList from '@components/sys/load-list.vue';
import CollectStar from '@components/sys/collect.vue';

export default {
    mixins: [notice],
    components: {
        contacts,
        itemLayout,

        AnnualProject,
        monthProjectLine,
        ageCount,

        contentItem,
        EmptyList,
        LoadList,
        CollectStar,
    },
    props: {
        isHavingPower: {
            type: Boolean,
            default: false,
        },
        company: {
            type: String,
            default: '',
        },
    },
    data() {
        return {
            activeName: '1',
            color: ['#3b68ff', '#2ec75a', '#ff8f00', '#ff5454'],
            statisticsArr: [
                {
                    title: '项目数量',
                    num: '',
                    type: '1',
                },
                {
                    title: '项目金额',
                    num: '',
                    type: '2',
                },
                {
                    title: '项目市区',
                    num: '',
                    type: '1',
                },
                {
                    title: '项目客户',
                    num: '',
                    type: '1',
                },
            ],
            companyInfo: {
                statisticsTime: '',
            },
            //年度项目统计
            yearProjectObj: {
                x: [],
                nums: [],
                price: [],
            },
            MonBiddingPriceList: [], //月度项目金额规模统计
            marketAreaList: [], //市场区域分布
            BidDynamicList: [], //中标项目动态
            hzqyList: [], //关联企业
            jzqyList: [], //竞争企业

            BidDynamicPgdata: {
                sortorder: 'desc',
                sortname: 'resdate',
                pageindex: 1,
                pagesize: 10,
                company: this.company,
                project_name: '',
            },
            bidDynamicMaxpage: 1,
            BidDynamicText: '向下滚动加载更多',
            //关联企业
            hzqyPgdata: {
                sortorder: 'desc',
                sortname: 'publishtime',
                pageindex: 1,
                pagesize: 10,
                company: this.company,
            },
            //竞争企业
            jzqyPgdata: {
                sortorder: 'desc',
                sortname: 'publishtime',
                pageindex: 1,
                pagesize: 10,
                company: this.company,
            },
            hzqyMaxpage: 1,
            hzqyText: '向下滚动加载更多',
            jzqyMaxpage: 1,
            jzqyText: '向下滚动加载更多',
        };
    },
    computed: {},
    watch: {},
    methods: {
        RightHandleClick(tab, event) {
            this.activeName = tab.name;
        },

        typeName(type) {
            let obj = {
                1: '个',
                2: '万',
            };
            return obj[type];
        },
        //获取统计信息时间段
        getStatisticalTime: function () {
            let that = this;
            that.$get(`${that.$store.state.api.tbUrl}/zbanalysis/getsearchrange.json`, {}, function (data) {
                this.companyInfo.statisticsTime = data.start + '~' + data.end;
            });
        },

        //获取中标信息统计
        getBidInfo() {
            let that = this;
            that.$get(
                `${that.$store.state.api.tbUrl}/tbanalysis/getprojectbase.json`,
                {
                    company: that.company,
                },
                function (data) {
                    that.statisticsArr[0].num = data.count;
                    // that.statisticsArr[1].num = (data.price/10000).toFixed(2);
                    that.statisticsArr[1].num = Math.floor(data.price) / 10000;
                    that.statisticsArr[2].num = data.citynums;
                    that.statisticsArr[3].num = data.customernums;
                }
            );
        },

        //获取年度项目统计
        getYearProject() {
            let that = this;
            that.$get(
                `${that.$store.state.api.tbUrl}/tbanalysis/annualstatistics.json`,
                {
                    company: that.company,
                    num: 3,
                },
                function (data) {
                    data.forEach((item) => {
                        this.yearProjectObj.x.push(item.datestr);
                        this.yearProjectObj.nums.push(item.nums);
                        // this.yearProjectObj.price.push((item.price/10000).toFixed(2));
                        this.yearProjectObj.price.push(Math.floor(item.price) / 10000);
                    });
                }
            );
        },

        //获取月度中标金额规模统计
        getMonBiddingPrice() {
            let that = this;
            that.$ajax({
                type: 'get',
                url: `${that.$store.state.api.tbUrl}/tbanalysis/monthlystatistics.json`,
                data: {
                    company: that.company,
                    num: 3,
                },
                callback: function (data) {
                    this.MonBiddingPriceList = data;
                },
                error: function () {},
            });
        },

        //获取市场区域分布
        getMarketArea() {
            let that = this;
            that.$get(
                `${that.$store.state.api.tbUrl}/tbanalysis/areaprojects.json`,
                {
                    company: that.company,
                },
                function (data) {
                    that.marketAreaList = data;
                }
            );
        },

        bidDynamicAfter(val) {
            this.setCzc(['查企业-详情-中标分析（企业画像）', '翻页' , '中标项目动态', val.current ,'checkEnterpriseWin-page-winProject']);
        },
        jzqyAfter(val){
            this.setCzc(['查企业-详情-中标分析（企业画像）', '翻页' , '竞争企业', val.current ,'checkEnterpriseWin-page-competeEnterprise']);
        },
        hzqyAfter(val) {
            this.setCzc(['查企业-详情-中标分析（企业画像）', '翻页' , '招标企业', val.current ,'checkEnterpriseWin-page-bidEnterprise']);
        },

        //获取关联企业
        getHzqyList() {
            let that = this;
            this.setCzc(['查企业-详情-中标分析（企业画像）', '翻页' , '招标企业', this.hzqyList.pageindex ,'checkEnterpriseWin-page-bidEnterprise']);
            that.$get(`${that.$store.state.api.tbUrl}/tbanalysis/partnersinfo.json`, that.hzqyPgdata, function (data) {
                this.hzqyMaxpage = Math.ceil(data.total / 10);
                data.rows.forEach(function (item) {
                    that.hzqyList.push(item);
                });
            });
        },

        titleClick() {},
        //获取中标动态收藏
        getBidDynamicCollect: function (index) {
            let that = this;
            that.$get(
                `${that.$store.state.api.tbUrl}/tbanalysis/winnernoticelist.json`,
                {
                    sortorder: 'desc',
                    sortname: 'resdate',
                    pageindex: index + 1,
                    pagesize: 1,
                    company: that.company,
                },
                function (data) {
                    that.$set(that.BidDynamicList, index, data.rows[0]);
                }
            );
        },

        //获取中标企业关注
        getHzqyListFollow: function (index) {
            let that = this;
            that.$get(
                `${that.$store.state.api.tbUrl}/tbanalysis/partnersinfo.json`,
                {
                    sortorder: 'desc',
                    sortname: 'publishtime',
                    pageindex: index + 1,
                    pagesize: 1,
                    company: that.company,
                },
                function (data) {
                    that.$set(that.hzqyList, index, data.rows[0]);
                }
            );
        },
        //获取竞争企业关注
        getJzqyListFollow: function (index) {
            let that = this;
            that.$get(
                `${that.$store.state.api.tbUrl}/tbanalysis/competesinfo.json`,
                {
                    sortorder: 'desc',
                    sortname: 'publishtime',
                    pageindex: index + 1,
                    pagesize: 1,
                    company: that.company,
                },
                function (data) {
                    that.$set(that.jzqyList, index, data.rows[0]);
                }
            );
        },

        zbdtTitleClick: function (val) {
            this.openNotice(val.guid,val.noticetype,false);
        },
        companyHandle (val) {
            if (!val.guid) {
                return ShowMsg('当前企业数据暂无数据', 'warning');
            }
            
            this.goto({
                path: './portraits',
                query: {
                    guid: val.guid,
                    company: val.company,
                },
            });
        },

    },
    
    mounted() {
        //判断登录，未登录，不
        this.getStatisticalTime();
        this.getBidInfo();
        this.getYearProject();
        this.getMonBiddingPrice();
        this.getMarketArea();
    },
  
};
</script>

<style lang="scss" scoped>
@import '@css/var.scss';
.zhongbiao-analysis {
    .items {
        display: flex;
        flex-wrap: wrap;

        & > div {
            width: 375px;
            margin-top: 10px;
            margin-left: 16px;

            &:nth-child(3n + 1) {
                margin-left: 0;
            }

            &:nth-child(-n + 3) {
                margin-top: 0;
            }
        }
    }

    .statistics {
        // margin-top: 10px;
        .statistics-time {
            color: $infoColor;
        }

        .statistics-items {
            display: flex;
            justify-content: space-between;
            padding: 28px 40px;
            font-size: 12px;
            background-color: #f9f9f9;

            .top {
                display: flex;
                align-items: flex-end;

                .num {
                    font-size: 17px;
                    margin-right: 3px;
                    font-weight: 600;
                }
            }

            .title {
                margin-top: 15px;
            }
        }
    }

    .charts {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: 30px;

        & > div {
            width: 560px;
        }
    }

    .bottom {
        display: flex;
        justify-content: space-between;
        margin-top: 15px;

        & > div {
            width: 560px;
        }

        .bottom-left {
            .bottom-right-items {
                margin-top: 15px;
                .title_con {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    p {
                        font-size: 15px;
                        font-weight: 600;
                        max-width: 460px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        span {
                            cursor: pointer;
                        }
                    }
                    p span:hover {
                        color: $primaryColor;
                    }
                    span {
                        margin-right: 10px;
                    }

                    & > div{
                        display: flex;
                        align-items: center;
                    }
                }
                .detail_con {
                    margin-top: 15px;
                    line-height: 1.6em;
                }
            }
        }

        .bottom-right {
            .bottom-right-items {
                margin-top: 15px;

                .title_con {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    p {
                        font-size: 15px;
                        font-weight: 600;
                        max-width: 460px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        span {
                            cursor: pointer;
                        }
                    }

                    p span:hover {
                        color: $primaryColor;
                    }

                    & > div{
                        display: flex;
                        align-items: center;
                    }
                }
                .detail_con {
                    // margin-top: 15px;
                    // line-height: 1.6em;
                    margin-top: 3px;
                    span {
                        margin-right: 20px;
                        display: inline-block;
                        margin-top: 3px;
                    }
                }
            }

            .re-tab {
                ::v-deep {
                    .el-tabs__header {
                        margin: 0 0 0px;
                    }
                }
            }
            .re-radio {
                float: right;
                top: -10px;
                ::v-deep {
                    .el-radio-group {
                        float: right;
                        top: -2px;
                    }
                    .el-radio-button__inner {
                        padding: 0px;
                        border-radius: 0;
                        span{
                            font-size: 14px;
                            display: block;
                            padding: 6px;
                        }
                    }
                }
            }
        }
    }
    .pagination {
        margin-top: 20px;
    }
}
</style>